import React, { PureComponent } from 'react';
import { message, Form, Input, Divider, Table, Icon, Button } from 'antd';
import { connect } from 'dva';
import SyOrderTableComponent from '../../components/SyOrderTableComponent';
import { SyOrderTableBasicFormComponent } from '../../components/SyOrderTableComponent';
import baseStyles from '../../components/SyOrderTableComponent/index.less';
import moment from 'moment';


@Form.create()
@connect(state => ({
  modelState: state.instalmentAlreadyPayOrder,
}))
export default class InstalmentAlreadyPayOrder extends SyOrderTableComponent {

  // 缺省
  _initSortion = { sortField: 'id', sortOrder: 'desc', };
  _initPagination = { pageSize: 10, current: 1, };
  _initCriteriaQuery = {};
  _operator = [

  ];

  initSelection() {
    const { dispatch } = this.props;
    // dispatch({
    //   type: 'product/fetchSelectItems',
    //   payload: { service: '/product', apiUrl: '/productCategory', selectName: 'catSelectItems', current: 1, pageSize: 1000 }
    // });
  }

  componentWillMount() {
    this.initSelection();
    this.setState({
      baseModel: 'instalmentAlreadyPayOrder',
      operator: this._operator,
      initPagination: this._initPagination,
      initSortion: this._initSortion,
      initCriteriaQuery: this._initCriteriaQuery,
      needSearch: true,
      needAdd: false,
      needEdit: false,
      needDelete: false,
      showTotalCountBox: true,
      totalCountData: [{
        value: 'repayedOrderNum',
        label: '已还订单数',
      }, {
        before: '¥',
        value: 'repayedAmount',
        label: '已还总金额',
      }, {
        value: 'repayedOverdueOrderNum',
        label: '逾期已还订单',
      }, {
        before: '¥',
        value: 'repayedOverdueOrderAmount',
        label: '逾期已还总金额',
      }, {
        before: '¥',
        value: 'repayedOverdueFineAmount',
        label: '逾期已还总利息',
      }],
      needTableColumnsOperator: false,
      needTableCheckbox: true,
      tableBorder: false,
      // defaultExpandAllRows: true,
      statusField: 'status',
      tableScroll: { y: 800 },
      tableColumns: [
        {
          title: '序号',
          dataIndex: '222',
          width: 60,
          render: (text, record, index) => {
            const { modelState: { pagination } } = this.props;
            return <span>{index + 1 + (pagination.current - 1) * pagination.pageSize}</span>
          }
        },
        {
          title: '用户id',
          dataIndex: 'userId',
          width: 80,
        },
        {
          title: '订单号',
          dataIndex: 'orderId',
          width: 180,
        },
        {
          title: '姓名',
          dataIndex: 'userName',
          width: 120,
        },
        {
          title: '性别',
          dataIndex: 'gender',
          width: 80,
        },
        {
          title: '客户手机号',
          dataIndex: 'mobile',
          width: 130,
        },
        {
          title: '还款截止时间',
          dataIndex: 'itemEndTime',
          width: 200,
          render: (text, record) => {
            const list_bill = record.billList;
            if (list_bill.length > 0) {
              return (
                <div>
                  {
                    list_bill.map((bill, index) =>
                      <div key={bill.key}>
                        <span>
                          {bill.endTime}
                        </span>
                        {(index !== list_bill.length - 1) && (<Divider style={{ margin: '9px 0px', }} />)}
                      </div>
                    )
                  }
                </div>
              );
            }
            return (<div>/</div>);
          },
        },
        {
          title: '当前期数',
          dataIndex: 'itemPhaseNum',
          width: 100,
          render: (text, record) => {
            const list_bill = record.billList;
            if (list_bill.length > 0) {
              return (
                <div>
                  {
                    list_bill.map((bill, index) =>
                      <div key={bill.key}>
                        <span>
                          {bill.phaseNum} / {bill.totalPhase}
                        </span>
                        {(index !== list_bill.length - 1) && (<Divider style={{ margin: '9px 0px', }} />)}


                      </div>
                    )
                  }
                </div>
              );
            }
            return (<div>/</div>);
          },
        },
        {
          title: '应收金额',
          dataIndex: 'itemBillAmount',
          // width: 150,
          render: (text, record) => {
            const list_bill = record.billList;
            if (list_bill.length > 0) {
              return (
                <div>
                  {
                    list_bill.map((bill, index) =>
                      <div key={bill.key}>
                        <span>
                          ￥ {bill.billAmount}
                        </span>
                        {(index !== list_bill.length - 1) && (<Divider style={{ margin: '9px 0px', }} />)}
                      </div>
                    )
                  }
                </div>
              );
            }
            return (<div>/</div>);
          },
        },
        {
          title: '待还金额',
          dataIndex: 'itemWaitRepayAmount',
          // width: 150,
          render: (text, record) => {
            const list_bill = record.billList;
            if (list_bill.length > 0) {
              return (
                <div>
                  {
                    list_bill.map((bill, index) =>
                      <div key={bill.key}>
                        <span>
                          ￥ {bill.waitRepayAmount}
                        </span>
                        {(index !== list_bill.length - 1) && (<Divider style={{ margin: '9px 0px', }} />)}
                      </div>
                    )
                  }
                </div>
              );
            }
            return (<div>/</div>);
          },
        },
        {
          title: '还款金额',
          dataIndex: 'itemRepayAmount',
          width: 80,
          render: (text, record) => {
            const list_bill = record.billList;
            if (list_bill.length > 0) {
              return (
                <div>
                  {
                    list_bill.map((bill, index) =>
                      <div key={bill.key}>
                        <span>
                          {bill.repayAmount}
                        </span>
                        {(index !== list_bill.length - 1) && (<Divider style={{ margin: '9px 0px', }} />)}
                      </div>
                    )
                  }
                </div>
              );
            }
            return (<div>/</div>);
          },
        },
        {
          title: '逾期天数',
          dataIndex: 'itemOverdueLength',
          width: 80,
          render: (text, record) => {
            const list_bill = record.billList;
            if (list_bill.length > 0) {
              return (
                <div>
                  {
                    list_bill.map((bill, index) =>
                      <div key={bill.key}>
                        <span>
                          {bill.overdueLength}
                        </span>
                        {(index !== list_bill.length - 1) && (<Divider style={{ margin: '9px 0px', }} />)}
                      </div>
                    )
                  }
                </div>
              );
            }
            return (<div>/</div>);
          },
        },
        {
          title: '逾期利息',
          dataIndex: 'itemWaitFineAmount',
          width: 80,
          render: (text, record) => {
            const list_bill = record.billList;
            if (list_bill.length > 0) {
              return (
                <div>
                  {
                    list_bill.map((bill, index) =>
                      <div key={bill.key}>
                        <span>
                          ￥ {bill.fineAmount}
                        </span>
                        {(index !== list_bill.length - 1) && (<Divider style={{ margin: '9px 0px', }} />)}
                      </div>
                    )
                  }
                </div>
              );
            }
            return (<div>/</div>);
          },
        },
        {
          title: '状态',
          dataIndex: 'itemStatus',
          width: 120,
          align: 'left',
          fixed: 'right',
          render: (text, record) => {
            const list_bill = record.billList;
            if (list_bill.length > 0) {
              return (
                <div>
                  {
                    list_bill.map((bill, index) =>
                      <div key={bill.key}>
                        <span>
                          <div>
                            <span style={{ marginLeft: '10px' }} ></span>
                            {this.choseIcon(bill.status)}
                            <span style={{ marginLeft: '15px' }} >{bill.status}</span>
                          </div>
                        </span>
                        {(index !== list_bill.length - 1) && (<Divider style={{ margin: '9px 0px', }} />)}
                      </div>
                    )
                  }
                </div>
              );
            }
            return (<div>/</div>);
          },
        },
        {
          title: '操作',
          dataIndex: 'operatoer',
          width: 120,
          fixed: 'right',
          render: (text, record) =>
            <a onClick={() => {
              this.setState({ editedEntity: record });
              this.handleOperator(true, '详 情', this.billForm, null, this.renderBillForm, record, () => this.onRepayClick(record), null, this.renderBillModalFootButton, 1200)
            }}>
              详 情
           </a>,
        },
      ],
      searchFormItem: [
        {
          name: 'orderId',
          label: '订单号',
          placeholder: '订单号',
          type: 'string',
          selectOption: [{ name: '', value: '' }],
        },
        {
          name: 'startDate',
          label: '订单日期起始',
          placeholder: '订单时间起始',
          type: 'dateTime',
          showTime: false,
        },
        {
          name: 'endDate',
          label: '订单日期截止',
          placeholder: '订单时间截止',
          type: 'dateTime',
          showTime: false,
        },
        {
          name: 'userId',
          label: '用户id',
          placeholder: '用户id',
          type: 'string',
          selectOption: [{ name: '', value: '' }],
        },
        {
          name: 'mobile',
          label: '用户手机',
          placeholder: '用户手机',
          type: 'string',
          selectOption: [{ name: '', value: '' }],
        },
        {
          name: 'isOverdue',
          label: '逾期',
          placeholder: '逾期',
          type: 'select',
          selectOption: { itemName: 'isOverDueSelectItems', name: 'name', value: 'value' },
        },
      ],
      repayModalVisible: false,
    });
  }

  onRepayClick = (record) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'instalmentAlreadyPayOrder/queryRepayItemById',
      payload: { orderId: record.orderId },
    });
    dispatch({
      type: 'instalmentAlreadyPayOrder/queryBillItemById',
      payload: { orderId: record.orderId },
    });
  }

  renderBillModalFootButton = [
  ];


  billFormItem = [
  ];

  renderBillForm = () => {
    const { form, modelState: { selectItems } } = this.props;
    return (
      <SyOrderTableBasicFormComponent
        ref={this.saveBillFormFormRef}
        formItems={this.billFormItem}
        selectItems={selectItems}
        renderAppend={this.renderRepayModalAppend}

      >

      </SyOrderTableBasicFormComponent>
    );
  }

  saveBillFormFormRef = (form) => {
    this.billForm = form;
  }

  renderRepayModalAppend = () => {
    return (
      <div>
        <Table
          scroll={{ y: 500 }}
          dataSource={this.props.modelState.currBillItem}
          columns={this.repayModelBillColumns}
          pagination={false}
          size='small'
          loading={this.props.modelState.billItemLoading}
          title={() => {
            return (
              <span style={{ fontWeight: 'bold', fontSize: 16 }}>
                分期记录
              </span>
            );
          }}
          rowKey={record => record.key}
          rowClassName={(record, index) => { return (!!record.currRepaySign ? baseStyles.tableRowSelected : '') }}
        />
        <Table
          style={{ marginTop: 12 }}
          scroll={{ y: 500 }}
          dataSource={this.props.modelState.currRepayItem}
          columns={this.repayModelRepayColumns}
          pagination={false}
          size='small'
          loading={this.props.modelState.repayItemLoading}
          title={() => {
            return (
              <span style={{ fontWeight: 'bold', fontSize: 16 }}>
                还款记录
              </span>
            );
          }}
          rowKey={record => record.key}
        />
      </div>
    );
  }

  repayModelBillColumns = [
    // {
    //   title: '当前应还',
    //   dataIndex: 'currRepaySign',
    //   width: 150,
    //   align: 'center',
    //   render: (text, record) => <span>{!!record.currRepaySign ? <Icon style={{ fontSize: 18, color: 'blue', fontWeight: 'bold' }} type="check" /> : ''}</span>,
    // },
    {
      title: '还款状态',
      dataIndex: 'status',
      align: 'left',
      width: 120,
      render: (text, record) =>
        <div>
          <span ></span>
          {this.choseIcon(record.status)}
          <span style={{ marginLeft: '15px' }} >{record.status}</span>
        </div>
      ,
    },
    {
      title: '应还日期',
      dataIndex: 'shouldRepayTime',
      align: 'center',
      width: 150,
    },
    {
      title: '分期金额',
      dataIndex: 'billAmount',
      align: 'center',
      width: 150,
      render: (text, record) => <span>￥ {record.billAmount}</span>,
    },
    {
      title: '期次',
      dataIndex: 'phase',
      width: 150,
      align: 'center',
      render: (text, record) => <span>{record.phaseNum} / {record.totalPhase} </span>,
    },
    {
      title: '应收金额',
      dataIndex: 'shouldRepayAmount',
      width: 150,
      align: 'center',
      render: (text, record) => <span>￥ {record.billAmount}</span>,
    },
    {
      title: '已还金额',
      dataIndex: 'repayAmount',
      width: 150,
      align: 'center',
      render: (text, record) => <span>￥ {record.repayAmount}</span>,
    },
    {
      title: '剩余应还',
      dataIndex: 'waitRepayAmount',
      width: 150,
      align: 'center',
      render: (text, record) => <span>￥ {record.waitRepayAmount}</span>,
    },
  ];

  repayModelRepayColumns = [
    {
      title: '还款日期',
      dataIndex: 'repayTime',
      width: 150,
      align: 'center',
      render: (text, record) => <span>{moment(record.repayItem.repayTime).format('YYYY-MM-DD HH:mm:ss')}</span>,
    },
    {
      title: '还款金额',
      dataIndex: 'repayAmount',
      width: 150,
      align: 'center',
      render: (text, record) => <span>￥ {record.repayItem.repayAmount}</span>,
    },
    {
      title: '期次',
      dataIndex: 'phase',
      width: 150,
      align: 'center',
      render: (text, record) => <span>{record.phaseNum} / {record.totalPhase} </span>,
    },
    {
      title: '操作时间日期',
      dataIndex: 'createTime',
      width: 150,
      align: 'center',
      render: (text, record) => <span>{moment(record.repayItem.createTime).format('YYYY-MM-DD HH:mm:ss')}</span>,
    },
  ];

  /* ***************************************************************** */


  choseIcon = (text) => {
    let icon = (<div></div>)
    switch (text) {
      case '已结清':
        icon = (<Icon style={{ color: '#35b34a' }} type="check-circle" />);
        break;
      case '部分已还':
        icon = (<Icon style={{ color: '#ffc640' }} type="minus-circle" />);
        break;
      case '待还款':
        icon = (<Icon style={{ color: '#ff0000' }} type="clock-circle" />);
        break;
      default:
        break;
    }
    return icon;
  }

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    super.componentDidMount();
  }

}
